<template>
  <div>
    <el-card style="margin: 20px" v-if="user.role == 1">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="searchForm.name" placeholder="请输入下单人" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>


    <el-card style="margin: 20px 0 30px 0">
      <el-table
        :data="tableData"
        border
        height="600"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="下单人"
          width="180">
        </el-table-column>
        <el-table-column
          prop="sum"
          label="订单总金额"
          width="180">
        </el-table-column>
        <el-table-column
          prop="foods"
          label="菜品"
          width="180">
<!--          <template slot-scope="scope">-->
<!--            <span>{{getFoodName(scope.row.foodIds)}}</span>-->
<!--          </template>-->
        </el-table-column>

        <el-table-column
          prop="orderRemarks"
          label="备注"
          width="180">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="下单时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="status"
          label="订单状态"
          width="180">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">{{scope.row.status == 1 ? '已支付' : '未支付'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
              <el-link v-if="scope.row.status != 1" @click="showPayDialog(scope.row)">去支付</el-link>
              <el-button icon="el-icon-circle-close" size="small" type="danger" plain @click="delOrder(scope.row.id)">删除订单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      style="text-align: center"
      title="扫码支付"
      :visible.sync="payShow"
      width="30%"
      :before-close="handleClose">
      <p>订单总金额：<span style="color: #f48651;font-size: 25px">{{row.sum}}元</span></p>
      <img src="../../pic/code.png" width="350" />
      <br>
      <el-button @click="payOrder(row.id)">支付成功（模拟完成）</el-button>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "orderInfo",
  data(){
    return{
      user: JSON.parse(localStorage.getItem("user")),
      searchForm:{
        name: ""
      },
      tableData: [],
      payShow: false,
      row: {},
      currentPage: 1,
      pageSize: 5,
      total: 0
    }
  },
  mounted() {
    this.listBy()
  },
  methods:{
    handleSizeChange(val){
      console.info("handleSizeChange", val)
      this.pageSize = val
      this.listBy()
    },
    handleCurrentChange(val){
      console.info("handleCurrentChange", val)
      this.currentPage = val
      this.listBy()
    },
    showPayDialog(row) {
      this.payShow = true
      this.row = row
    },
    onSubmit(){
      this.listBy()
    },
    listBy() {
      if (this.user.role == 1) {
        this.axios.get("http://localhost:8080/order/getByPage?name="+this.searchForm.name+"&page="+this.currentPage+"&size="+this.pageSize).then(res => {
          this.tableData = res.data.data.rows
          this.total = res.data.data.total
        })
      }else {
        this.axios.get("http://localhost:8080/order/getByPageC?id="+this.user.id+"&page="+this.currentPage+"&size="+this.pageSize).then(res => {
          this.tableData = res.data.data.rows
          this.total = res.data.data.total
        })
      }

    },
    payOrder(id) {
      console.info(id)
      this.axios.post("http://localhost:8080/order/payOrder?id="+id).then(res => {
        if (res.data.code == 200) {
          this.$message.success("支付成功")
          this.payShow = false
          this.listBy()
        }
      })
    },
    delOrder(id) {
      this.$confirm("确定要删除该食品吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
        this.axios.delete("http://localhost:8080/order/del?id="+id).then(res => {
          if (res.data.code == 200) {
            this.$message.success("删除成功！")
            this.listBy()
          }
        })
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.drawer = false
          done();
        })
        .catch(_ => {});
    },
  }
}
</script>

<style scoped>

</style>
